<template>
	<view>

		<view class="flex justify-center items-center f_26 c_5a mt_20" v-if="list.length>0">
			共{{list.length}}人参与抽奖
		</view>
		<view class="flex flex-col justify-start items-start list mt_20">
			<view class="flex flex-row justify-start items-center item" v-for="(item,index) in list" :key="index">
				<image v-if="item.avatar && item.avatar!=''" :src="item.avatar" mode="aspectFit" class="avatar"></image>
				<image v-else src="@/static/index/f.png" mode="aspectFit" class="avatar"></image>
				<view class="flex flex-col justify-start  info">
					<text class="f_28 c_52">{{item.nickname}}{{formatNumber(item.userPhone)}}</text>
					<text class="f_22 c_9"  v-if="item.submitTime">{{getTimeAgo(item.submitTime)}}参与了该抽奖</text>
				</view>
			</view>

		</view>
		<ListFooter :loadtitle="loadtitle"></ListFooter>
	</view>
</template>

<script>
	import {
		drawRcord
	} from '@/api/activity.js';
	import { getTimeAgo } from '../../utils/index'
import ListFooter from '../../components/listFooter/listFooter.vue';
	export default {
		components: {ListFooter},
    data() {
        return {
            loading: false,
            loadend: false,
            loadtitle: '暂无数据',
            list: [],
            page: 1,
            limit: 10,
            id: ''
        };
    },
    onLoad(data) {
        if (data.id) {
            this.id = data.id;
        }
        this.getlist();
    },
    onReachBottom: function () {
        this.page++;
        this.getlist();
    },
    onPullDownRefresh() {
        this.list = [];
        this.page = 1;
        this.loadend = false
        this.getlist();
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000);
    },
    methods: {
        formatNumber(number) {
            let str = number.toString();
            // 使用正则表达式匹配三位整数并替换为三个星号
            return str.replace(/(\d{3})\d*(\d{4})/, "$1****$2");
        },
        // 动态显示时间值  公公方法
        getTimeAgo(dateTime) {
            return getTimeAgo(dateTime);
        },
        getlist() {
            let data = {
                activityId: this.id,
                page: this.page,
                limit: this.limit
            };
			uni.showLoading({
          title: '加载中...'
        })
            if (this.loading)
                return;
			if (this.loadend)
                return;
            this.loading = true;
            this.loadtitle = '加载中';
            drawRcord(data).then(res => {
				uni.hideLoading()
                let list = res.data.list;
                let loadend = list.length < this.limit;
                this.list = this.list.concat(list);
                this.loadend = loadend;
                this.loading = false;
                this.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多";
            }).catch(err => {
                this.loading = false;
                this.loadtitle = '加载更多';
            });
        }
    },
    components: { ListFooter }
}
</script>

<style lang="scss">
	.list {
		width: 710rpx;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 20rpx;

		.item {
			padding: 20rpx
		}
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
</style>